<template>
	<view class="informSet">
		<comHead :title="$t('grzx.tzsz')" :isLeft="true" :isRight="false"></comHead>
		<view class="list">
			<view class="col">
				<view class="item">
					<view class="l">
						<text>{{$t('grzx.jstz')}}</text>
					</view>
					<view class="r">
						<switch checked="true" color="#0f9dfe" />
					</view>
				</view>
			</view>

			<view class="col">
				<view class="item">
					<view class="l">
						<text>{{$t('grzx.tstx')}}</text>
					</view>
					<view class="r">
						<switch checked="true" color="#0f9dfe" />
					</view>
				</view>
			</view>
		<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
			<text class="tit">{{$t('grzx.tzxsfs')}}</text>

			<view class="col">
				<view class="item">
					<view class="l">
						<text>{{$t('grzx.zmjtb')}}</text>
					</view>
					<view class="r">
						<switch checked="true" color="#0f9dfe" />
					</view>
				</view>
				<view class="item">
					<view class="l">
						<text>{{$t('grzx.xftz')}}</text>
					</view>
					<view class="r">
						<switch checked="true" color="#0f9dfe" />
					</view>
				</view>
				<view class="item">
					<view class="l">
						<text>{{$t('grzx.sptz')}}</text>
					</view>
					<view class="r">
						<switch checked="true" color="#0f9dfe" />
					</view>
				</view>
			</view>

			<text class="tit">{{$t('grzx.tzpl')}}</text>

			<view class="col">
				<view class="item radios">
					<radio-group name="" @change="radioChange">
						<label>
							<radio active-background-color="rgb(88,136,255)" :value="'1'" /><text>{{$t('grzx.mttx')}}</text>
							<image :src="changeImage(1)" mode=""></image>
						</label>
						<label>
							<radio active-background-color="rgb(88,136,255)" :value="'2'" /><text>{{$t('grzx.yzyc')}}</text>
							<image :src="changeImage(2)" mode=""></image>
						</label>
						<label>
							<radio active-background-color="rgb(88,136,255)" :value="'3'" /><text>{{$t('grzx.myyc')}}</text>
							<image :src="changeImage(3)" mode=""></image>
						</label>
					</radio-group>
				</view>
			</view>
		<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioVal: '1'
			}
		},
		methods: {
			radioChange(e) {
				this.radioVal = e.detail.value
			},
			changeImage(n) {
				if (n == this.radioVal) {
					return 'https://siha.vxmeng.com/static/my/selected.png';
				} else {
					return 'https://siha.vxmeng.com/static/my/no-selected.png';
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.informSet {
		height: 100vh;


		.tit {
			display: inline-flex;
			width: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			color: rgba(255, 255, 255, 0.5451);
		}

		.list {
			padding: 30rpx;
			box-sizing: border-box;

			.col {
				background-color: rgba(40, 46, 81, .6);
				border-radius: 20rpx;
				padding: 0 30rpx;
				margin-bottom: 20rpx;

				.item {
					padding: 40rpx 0;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid rgba(#FFFFFF, 0.1);

					&:last-child {
						border: none;
					}

					.l {
						display: flex;
						flex-direction: column;

						text {
							color: #fff;
							font-size: 32rpx;

							&:nth-child(2) {
								color: rgba(#fff, 0.5);
								font-size: 24rpx;
								margin-top: 20rpx;
							}
						}
					}

					.r {
						switch {
							transform: scale(0.7);
							transform-origin: 100% 50%;
						}
					}

					radio-group {
						display: flex;
						flex-direction: column;
						width: 100%;

						/deep/uni-radio .uni-radio-input {
							width: 40rpx;
							height: 40rpx;
							background: none !important;
						}

						label {
							padding: 30rpx 0;
							position: relative;
							border-bottom: 1rpx solid rgba(#FFFFFF, 0.1);

							&:last-child {
								border: none;
							}

							text {
								color: #fff;
								font-size: 28rpx;
								margin-left: 20rpx;
							}

							image {
								position: absolute;
								width: 32rpx;
								height: 32rpx;
								left: 20rpx;
								top: 38rpx;
							}

							radio {
								visibility: hidden;
							}
						}
					}
				}

				.radios {
					padding: 0;
				}
			}
		}
	}
</style>